<template>
    <content-comp class="page-container">
          <div slot="left">
              <div class="title">
                  <span class="text">数据库列表</span>
                  <i class="el-icon-document-add corigin" @click="dialogVisible=true" ></i>
              </div>
              <div :class="['menu-item',index==curIndex?'active':'']" v-for="(item,index) in tableData" @click="add(item,index)">
                  <span>{{item.name}}</span>
                      <i class="el-icon-delete"  @click="dels(item, index)"></i>
              </div>
          </div>
          <div slot="right">
              <div class="title" style="width: 500px">
                  <span class="text">数据库配置</span>
                  <div class="btn-group">
                      <el-button type="danger" size="small" plain @click="testConnect()">测试连接</el-button>
                      <el-button type="primary" size="small" @click="save()">保存</el-button>
                  </div>
              </div>
              <edit-dialog  optMode="U" ref="editDialog" @saved="queryDatabaseCon" :showBtn="false" />
          </div>
          <el-dialog width="600px" title="添加数据库连接"
                     :visible.sync="dialogVisible" :close-on-click-modal="false" @close="dialogVisible=false">
              <add-dialog ref="addDialog" optMode="A" @saved="queryDatabaseCon" :showBtn="true" />
          </el-dialog>
      </content-comp>
</template>

<script>
// api
import editDialog from './EditDatabaseConnect'
import addDialog from './EditDatabaseConnect'
import ajax from '@api/ajax'
import { DATABASE_CON_SAVE, QUERY_DBLINK } from '@api/url'
import ContentComp from "../../../components/contentComp/contentComp";
export default {
  name: 'database-connect',
    data () {
        return {
            tableData: [],
            multipleSelection: [],
            pageInfo: {
                pageNo: 1,
                pageSize: 5,
                total: 0
            },
            activeName: 'first',
            height: window.innerHeight - 270,
            dialogVisible:false,
            curIndex:0,//默认选中
        }
    },
    components: {ContentComp, editDialog, addDialog},
    created () {
        this.queryDatabaseCon();
    },
    methods: {
        /**
         * 批量删除行
         * @param {object} row 行数据
         * @param {number} i 数据的序号
         */
        dels (row, i) {
          if (row) {
            this.tableData.splice(i, 1)
            row.optMode = 'D'
            ajax.post(DATABASE_CON_SAVE, row).then(res => {
                this.$message.success('删除成功')
                this.queryDatabaseCon()
            }).catch(e => {
                this.$message.error(e.message)
              })
          }
        },

        queryDatabaseCon () {
            this.dialogVisible=false // 点击保存的时候未关闭弹窗
            ajax.post(QUERY_DBLINK).then(res => {
                let  data = res.data.records;
                this.tableData = data;
                this.$nextTick(()=>{
                    this.showDetail(data[this.curIndex]);//默认显示第一个
                })
            })
        },
        add(row,index) {
            this.curIndex = index
            row.searchpro = true
            this.$refs.editDialog.queryByCondition(row)
        },
        showDetail(row) {
            row.searchpro = true
            this.$refs.editDialog.queryByCondition(row)
        },
        testConnect(){//测试连接
            this.$refs.editDialog.testConnect();
        },
        save(){//数据库保存
            this.$refs.editDialog.save();
        }
    },

}
</script>

<style lang="stylus" scoped>
.page-container{
    .btn-group{
        button{
           width 90px
           font-size 14px
       }
    }
    .menu-item{
        padding: 8px 20px;
        color #3a3a3a
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        cursor pointer
        .el-icon-delete{
            display none
            color gray
            font-size 18px
            font-weight bolder
        }
        &.active{
            font-weight: bold;
            background-color: #ffe6e8;
            color: #f95160;
            .el-icon-delete{
                display block
            }
        }
    }
}
</style>
